<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            font-size: 14px;
            color: #000000;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        thead {
            background: #3d444c;
            color: #ffffff;
        }

        td,
        th {
            border: 1px solid #e1e1e1;
            padding: 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>price</th>
                <th>sales</th>
            </tr>
        </thead>
        <tbody id="jsList">
            <tr>
                <td>产品1</td>
                <td>10.0</td>
                <td>800</td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>30.0</td>
                <td>600</td>
            </tr>
            <tr>
                <td>产品3</td>
                <td>42.5</td>
                <td>700</td>
            </tr>
            <tr>
                <td>产品4</td>
                <td>40.5</td>
                <td>500</td>
            </tr>
            <tr>
                <td>产品5</td>
                <td>60.5</td>
                <td>300</td>
            </tr>
            <tr>
                <td>产品6</td>
                <td>50.0</td>
                <td>400</td>
            </tr>
            <tr>
                <td>产品7</td>
                <td>70.0</td>
                <td>200</td>
            </tr>
            <tr>
                <td>产品8</td>
                <td>80.5</td>
                <td>100</td>
            </tr>
        </tbody>
        <button onclick='sort("price","asc")'>按照price升序排列</button>
        <button onclick='sort("price","desc")'>按照price降序排列</button>
        <button onclick='sort("sales","asc")'>按照sales升序排列</button>
        <button onclick='sort("sales","desc")'>按照sales降序排列</button>
    </table>
    <!-- 
        系统会在tbody中随机生成一份产品信息表单，如html所示。
        请完成 sort 函数，根据参数的要求对表单所有行进行重新排序。
        1、type为id、price或者sales，分别对应第1 ~ 3列
        2、order为asc或者desc，asc表示升序，desc为降序
        3、例如 sort('price', 'asc') 表示按照price列从低到高排序
        4、所有表格内容均为数字，每一列数字均不会重复
        5、不要使用第三方插件
     -->
    <script type="text/javascript">
        // 填写JavaScript
        function sort(type, order) {
            const tbody = document.getElementById("jsList");
            const trs = Array.from(document.querySelectorAll("#jsList tr"));
            let data = [];
            for (let i = 0; i < trs.length; i++) {
                let tds = Array.from(trs[i].childNodes);
                data.push({
                    id: tds[0].innerHTML,
                    price: tds[1].innerHTML,
                    sales: tds[2].innerHTML,
                    tr: trs[i]
                });
            }
            data.sort((a, b) => {
                if (order == "asc") return a[type] - b[type];
                else if (order == "desc") return b[type] - a[type];
                else return 0;
            });
            tbody.innerHTML = '';
            data.forEach(item => {
                tbody.appendChild(item.tr);
            });
            return data;
        }
        /*
function sort(type, order) {
    //type为id、price或者sales;   asc表示升序，desc为降序
    // 1.获取父节点
    var tbody = document.getElementById('jsList')
    // 2.获取数据--多少行数据
    var len = tbody.children.length
    // 3.遍历获取数组
    var domArr = []
    var typeNum = type == 'id' ? 0 : type == 'price' ? 1 : type == 'sales' ? 2 : ''
    for (let i = 0; i < len; i++) {
      domArr.push(tbody.children[i])
    }
    // 4.重新排列--js sort()
    domArr.sort((a, b) => {
      return order==='desc' ? (b.children[typeNum].innerHTML - a.children[typeNum].innerHTML) : (a.children[typeNum].innerHTML - b.children[typeNum].innerHTML)
    })
    // 5.更新节点
    domArr.forEach(item => {
      tbody.appendChild(item);
    })
  }
        */
    </script>
</body>

</html>